<template>
  <el-dialog :title="addSubInfodata.id?'修改学科':'添加学科'" :visible.sync="showSubDialog" @close="clearSubContent">
    <!-- 表单 -->
    <el-form
      v-if="showSubDialog"
      ref="addSubInfo"
      label-width="100px"
      :model="addSubInfodata"
      :rules="rules"
    >
      <el-row type="flex">
        <el-form-item label="学科名称">
          <el-input v-model="addSubInfodata.subject_name" placeholder="请输入学科名称" />
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item label="排序">
          <el-input-number
            v-model="addSubInfodata.sort"
            label="排序"
            @change="handleChange"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="是否显示">
          <el-switch
            v-model="addSubInfodata.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="学科图标">
          <!-- 图片上传 -->
          <el-upload
            action="http://122.51.249.55:7005/admin/index/upload?mode=single&type=image"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :headers="myToken"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="150%" :src="dialogImageUrl" alt="">
            <!-- <img width="100%" :src="addCataInfodata.directory_icon" alt="">
            <img width="100%" src="http://122.51.249.55:7005/upload/image/2021/11/1635738718736.jpg" alt=""> -->
          </el-dialog>
          <span>建议尺寸:120*120</span>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button size="middle" @click="btnCancel">取消</el-button>
          <el-button
            type="primary"
            size="middle"
            @click="btnOk()"
          >确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addSubInfo, editSingleSub, getSingleSub } from '@/api/subInfo'
import { mapGetters } from 'vuex'
const defaultSub = {
  subject_name: '',
  is_show: '',
  sort: '',
  subject_icon: ''
}
export default {
  name: 'AddSubInfo',
  data() {
    return {
      myToken: { Authorization: null },
      showSubDialog: false,
      dialogImageUrl: '',
      dialogVisible: false,
      addSubInfodata: {
        ...defaultSub
      },
      // 上传的图片
      fileList: [{ name: 'previewImg', url: '' }],
      // 验证规则
      rules: {
        subject_name: [
          { required: true, message: '请选择学科分类', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    // console.log($store.getters.token)
    this.myToken.Authorization = this.token
  },

  mounted() {},

  methods: {
    handleChange(value) {
      console.log(value)
    },
    // 移除图片
    handleRemove(file, fileList) {
      this.fileList = []
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleAvatarSuccess(response, file, fileList) {
      // console.log(response.data.url)
      this.$message.success('图片上传成功')
      this.addSubInfodata.subject_icon = response.data.url
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    btnCancel() {
      // 清空数据
      this.addSubInfodata = {
        subject_name: '',
        num: 1
      }
      this.$refs.addSubInfo.resetFields() // 重置校验结果
      // 关闭弹层
      this.showSubDialog = false
    },
    async btnOk() {
      // 验证表单
      // console.log('确定按钮')
      await this.$refs.addSubInfo.validate()
      if (this.addSubInfodata.id) {
        // 有id修改
        await editSingleSub(this.addSubInfodata)
        this.$message.success('修改成功')
        this.addSubInfodata = {}
        this.fileList = []
      } else {
        // 无id添加
        await addSubInfo(this.addSubInfodata)
        this.$message.success('添加成功')
      }
      this.$emit('updateSub')// 子父通信
      this.addSubInfodata = {
        ...defaultSub
      }
      this.$refs.addSubInfo.resetFields() // 重置校验结果
      this.showSubDialog = false
    },
    // 父组件点击编辑按钮，显示单个目录数据
    async getSingleSub(id) {
      const { data } = await getSingleSub(id)
      this.addSubInfodata = data
      console.log(data.subject_icon)
      this.fileList[0].url = `http://122.51.249.55:7005/${data.subject_icon}`
    },
    clearSubContent() {
      this.addSubInfodata = {
        ...defaultSub
      }
      // this.handleRemove()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header{
  background: #66b1ff;
  padding: 20px 20px 10px;
}

</style>
